<template>
  <view class="my-booking">
    <view v-for="item in bookings" :key="item.id" class="booking-item">
      <view class="title">{{ item.courtName }}</view>
      <view class="info">{{ item.date }} {{ item.time }} | {{ item.duration }}小时</view>
      <view class="status" :class="item.status">{{ statusText(item.status) }}</view>
      <button v-if="item.status === 'BOOKED'" @click="cancelBooking(item.id)">取消预定</button>
    </view>
    <empty v-if="!bookings.length" text="暂无预定"/>
  </view>
</template>

<script setup>
import {ref, onMounted} from 'vue'
import {request} from '@/utils/request'

const bookings = ref([])

onMounted(async () => {
  bookings.value = await request({url: '/api/booking/list'})
})

const statusText = (status) => {
  switch (status) {
    case 'BOOKED':
      return '已预定'
    case 'CANCELLED':
      return '已取消'
    case 'COMPLETED':
      return '已完成'
    default:
      return status
  }
}

const cancelBooking = async (id) => {
  await request({url: `/api/booking/cancel?id=${id}`, method: 'POST'})
  uni.showToast({title: '已取消', icon: 'success'})
  bookings.value = await request({url: '/api/booking/list'})
}
</script>

<style scoped>
.my-booking {
  padding: 20rpx;
}

.booking-item {
  background: #fff;
  border-radius: 8rpx;
  margin-bottom: 20rpx;
  padding: 20rpx;
}

.title {
  font-size: 32rpx;
  font-weight: bold;
}

.info {
  color: #888;
  margin: 10rpx 0;
}

.status {
  font-size: 28rpx;
}

.status.BOOKED {
  color: #007aff;
}

.status.CANCELLED {
  color: #ccc;
}

.status.COMPLETED {
  color: #67c23a;
}
</style>
